<template>
  <!-- 预约日历 -->
  <section class="reserve-calendar">
    <div class="rescalendar-table-box">
      <table border="0" width="100%" style="table-layout: fixed;" class="rescalendar-table">
        <thead>
          <tr style="text-align:center; font-weight: bold;">
            <th>周日</th>
            <th>周一</th>
            <th>周二</th>
            <th>周三</th>
            <th>周四</th>
            <th>周五</th>
            <th>周六</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item,index) in tableList" :key="index">
            <td v-for="(item2,index2) in item" :key="index2">
              <div v-if="!item2.isEmpty" :class="['item-box',item2.isDay?'cur-day':'']" @click="onDetail(item2)">
                <div class="day-box">{{item2.dateDay|toTimeStr}}</div>
                <div  class="res-font">
                  人数:{{item2.count}} 
                </div> 
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <yyPatient v-model="dialogDetail" :curItem="curItem"></yyPatient>
  </section>
</template>
<script>
export default {
  props: {
    curDate: {
      type: Date,
      default: new Date()
    },
    form: {
      type: Object,
      default: function() {
        return {};
      }
    }
  },
  components: {
    yyPatient: () => import("./yyPatient.vue")
  },
  filters: {
    toTimeStr(value) {
      if (value) {
        return value.substring(3, value.length);
      } else return "";
    }
  },
  data() {
    return {
      dialogDetail: false,
      curItem: null,
      tableList: []
    };
  },
  created() {
    let th = this;
    th.getData();
  },
  methods: {
    //查看详情
    onDetail(obj) {
      let th = this;
      if (!obj.count) return;
      th.curItem = {
        deptId: th.form.deptId,
        doctorId: th.form.doctorId,
        registerType: th.form.registerType,
        dateDayStart: obj.intactDateDay,
        dateDayEnd: obj.intactDateDay
      };
      th.dialogDetail = true;
    },
    getData() {
      let th = this;
      let arrayList = [];
      let curDateStr = th.$utils.FormatTime("yyyy-MM-dd", new Date().getTime());
      let j = {
        deptId: "",
        doctorId: "",
        registerType: "",
        month: ""
      };
      Object.assign(j, th.form);
      j.month = `${th.curDate.getFullYear()}-${th.jiaLing(
        th.curDate.getMonth() + 1
      )}`; 
      th.$api.getRegisterCalendarInfo(j).then(res => {
        if (res.executed) {
          let oneDate = new Date(
            th.curDate.getFullYear(),
            th.curDate.getMonth(),
            1
          );
          let arr = [];
          for (let i = 0; i < oneDate.getDay(); i++) {
            let j = {
              isEmpty: true
            };
            arr.push(j);
          }
          for (let i = 0; i < res.dataBody.daysInfos.length; i++) {
            let data = res.dataBody.daysInfos[i];
            if (data.intactDateDay == curDateStr) data["isDay"] = true;
            if (data.week > 0 && data.week % 6 == 0) {
              arr.push(data);
              arrayList.push(arr);
              arr = [];
            } else {
              arr.push(data);
            }
          }
          arrayList.push(arr);
          th.tableList = arrayList;
        }
      });
    },
    jiaLing(value) {
      if (value < 10) value = `0` + value;
      return value;
    }
  }
};
</script>
<style lang="scss" scoped>
.rescalendar-table-box {
  border: 1px solid #ebeef5;
  border-left: 0;
  border-top: 0;
  .res-font {
    font-size: 12px;
  }
}
.rescalendar-table {
  border-spacing: 0px;
  th {
    height: 32px;
    line-height: 32px;
    background: #f5f7fa;
  }
  td,
  th {
    border: 1px solid #ebeef5;
    border-right: 0;
    border-bottom: 0;
  }
}
.reserve-calendar {
  .item-box {
    overflow: hidden;
    text-align: center;
    height: 100px; 
    background: #fcfcfc;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .day-box { 
      height: 30px;  
      cursor: pointer;
      font-size: 15px;
      font-weight: bold;
    }
  }
  .cur-day {
    background-color: $bg-danger;
    color: white;
  }
}
</style>